<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <p>
        <button @click="increment">
            userProxy name is: {{ userProxy.name }}, age is: {{ userProxy.age }}
        </button>
    </p>

    <p>
        <button @click="increment2(userProxy)">
            userProxy name is: {{ userProxy.name }}, age is: {{ userProxy.age }}
        </button>
    </p>

    <p>
        <button @click="increment3">
           user name is: {{ user.name }}, age is: {{ user.age }}  修改原始对象，DOM不会更新
        </button>
        最好的实践是：仅使用响应式的reactive对象，不要用原始对象。
    </p>

    <p>
        <button @click="increment4(theUser)">
            theUser name is: {{ theUser.name }}, age is: {{ theUser.age }}
        </button>
    </p>
</div>

<script>
    const {createApp, ref, reactive} = Vue

    const user = {
        name: "阿冬",
        age: 35
    }
    const userProxy = reactive(user)

    // 最好的定义是：
    const theUser = reactive({
        name: "阿冬",
        age: 35
    })

    console.log(user === userProxy)
    console.log(reactive(user) === userProxy)
    console.log(reactive(userProxy) === userProxy)


    function increment() {
        console.log(userProxy.age)
        userProxy.age++
        console.log(userProxy.age)
    }

    function increment2(thisUser) {
        console.log(thisUser.age)
        userProxy.age++
        console.log(thisUser.age)
    }

    function increment3() {
        console.log(user.age)
        user.age++
        console.log(user.age)
    }

    function increment4() {
        console.log(theUser.age)
        theUser.age++
        console.log(theUser.age)
    }

    createApp({
        setup() {
            return {
                user,
                userProxy,
                theUser,
                increment,
                increment2,
                increment3,
                increment4
            }
        }
    }).mount('#app')
</script>
</body>
</html>